<template>
  <div class="address">
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push('/search')"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    >
    </van-address-list>
    <van-popup v-model="show" style="height: 100vh; width: 100vw">
      <van-nav-bar
        title="地址"
        left-text="返回"
        left-arrow
        @click-left="show = false"
      >
        <template #right>
          <i class="iconfont icon-sousuo"></i>
        </template>
      </van-nav-bar>
      <van-address-edit
        :area-list="areaList"
        :show-postal="false"
        :show-delete="deleteShow"
        :address-info="addressInfo"
        show-set-default
        show-search-result
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import Vue from "vue";
import { NavBar, Icon, AddressList, Popup, AddressEdit } from "vant";
import { mapActions, mapMutations, mapState } from "vuex";
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(AddressList);
Vue.use(Popup);
Vue.use(AddressEdit);
export default {
  name: "Address",
  data() {
    return {
      chosenAddressId: null, //当前选中地址索引
      disabledList: [], //不可配送地址列表
      show: false, //地址显示
      areaList, //地址列表
      addressInfo: {
        addressDetail: "",
        areaCode: "",
        city: "",
        country: "",
        county: "",
        isDefault: false,
        name: "",
        postalCode: "",
        province: "",
        tel: "",
      }, //默认地址
      deleteShow: false, //默认显示
    };
  },
  methods: {
    //清空数据
    onAdd() {
      this.show = true;
      this.deleteShow = false;
      this.addressInfo = {};
    },
    //获取修改数据
    onEdit(item, index) {
      this.show = true;
      this.deleteShow = true;
      this.addressInfo = this.list[index];
    },
    //修改或者添加地址
    onSave(content) {
      let address =
        content.province == content.city
          ? content.city + content.county + " " + content.addressDetail
          : content.province +
            content.city +
            content.county +
            " " +
            content.addressDetail;
      if (!this.deleteShow) {
        let id;
        if (this.list.length) {
          id = "" + (parseInt(this.list[this.list.length - 1].id) + 1);
        } else {
          id = "1";
        }
        this.chosenAddressId = id;
        let info = {
          id,
          name: content.name,
          tel: content.tel,
          address,
          isDefault: content.isDefault,
          addressDetail: content.addressDetail,
          areaCode: content.areaCode,
          city: content.city,
          country: content.country,
          county: content.county,
          postalCode: content.postalCode,
          province: content.province,
        };
        let kong = {
          name: "",
          tel: "",
          country: "",
          province: "",
          city: "",
          county: "",
          areaCode: "",
          postalCode: "",
          addressDetail: "",
          isDefault: false,
        };
        for (const key in content) {
          content[key] = kong[key];
        }
        this.addressList({ type: "addList", list: info });
      } else {
        content.address = address;
        this.addressList({
          type: "revList",
          list: content,
          delete: this.deleteShow,
        });
      }
      this.show = false;
    },
    //删除数据
    onDelete(item) {
      let index = this.list.findIndex((ele) => item.id == ele.id);
      this.addressList({ type: "delList", index });
      this.show = false;
    },
    onSelect(item) {
      this.revSelect(item.id);
    },
    //引入vuex函数
    ...mapActions({
      addressList: "addressList",
    }),
    ...mapMutations({ revSelect: "revSelect" }),
  },
  computed: {
    //引入vuex数据源
    ...mapState({ list: "list" }),
  },
  created() {
    //默认地址索引
    if (this.list.length) {
      this.chosenAddressId =
        this.list[this.list.findIndex((ele) => ele.select)].id;
    }
  },
  beforeRouteEnter(to, from, next) {
    !window.sessionStorage.getItem("token") ? next("/login") : next();
  },
};
</script>
<style lang="less">
.address {
  .van-overlay {
    display: none;
  }
  .van-nav-bar {
    position: sticky;
    top: 0;
    background-color: rgb(242, 242, 242);
    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        font-size: 16px;
        line-height: 46px;
        color: #8a8a8a;
      }
    }
  }
  .van-address-list{
   height: auto;
  }
}
</style>
